<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台菜单管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__ADMIN__css/bootstrap.min.css" rel="stylesheet">
    <link href="__ADMIN__css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="__ADMIN__css/animate.min.css" rel="stylesheet">
    <link href="__ADMIN__css/style.min.css" rel="stylesheet">
    <link href="__ADMIN__js/plugins/layer/skin/default/layer.css" rel="stylesheet">
    <link rel="stylesheet" href="__ADMIN__css/plugins/switchery/switchery.css" />
    <link href="__ADMIN__css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>菜单管理</h5>
                    <div class="ibox-tools" style="float: left;margin-top: -8px; margin-left: 30px;">
                        <a href="javascript:addM();" class="btn btn-outline btn-primary" style="color: #05AD94;border-color: #FFFFFF;">添加菜单</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>排序</th>
                                <th>菜单名</th>
                                <th>链接</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="show">
                        <volist name="list" id="vo">
                            <tr>
                                <td>{$vo.sort}</td>
                                <td>{$vo.html}{$vo.title}</td>
                                <td>{$vo.link}</td>
                                <td>
                                    <if condition="($vo.status eq 1)">
                                        <a href="javascript:changeMode({$vo.id})" id="mode{$vo.id}" class="btn btn-info btn-outline">正常</a>
                                        <else />
                                        <a href="javascript:changeMode({$vo.id})" id="mode{$vo.id}" class="btn btn-warning btn-outline">禁用</a>
                                    </if>
                                </td>
                                <td>
                                    <a href="javascript:addChildM({$vo['id']});" type="button" class="btn btn-outline btn-info"><i class="fa fa-pencil-square-o"></i>添加子菜单</a>
                                    <a href="javascript:edit({$vo['id']});" type="button" class="btn btn-outline btn-info"><i class="fa fa-pencil-square-o"></i>修改</a>
                                    <a href="javascript:Del({$vo.id})" class="btn btn-outline btn-danger"><i class="fa fa-trash-o"></i>删除</a>
                                </td>
                            </tr>
                        </volist>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade form-horizontal" style=" display: none;" id="addM" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加菜单</h4>
            </div>
            <div class="modal-body" style="height:500px;">
                <form method="post" action="{:U('Menu/save')}" id="form" name="form">
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">菜单名称</label>

                        <div class="col-sm-7">
                            <input type="text" value="" name="title" id="title" placeholder="请输入菜单名称" class="form-control">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">链接名称</label>

                        <div class="col-sm-7">
                            <input type="text" value="" name="link" id="link" placeholder="请输入链接名称" class="form-control">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">排序</label>

                        <div class="col-sm-7">
                            <input type="text" value="0" name="sort" id="sort" placeholder="请输入排序" class="form-control">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态</label>

                        <div class="col-sm-10">
                            <input type="checkbox" name="status" id="status" value="1" class="js-switch"  checked />
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class=" col-sm-offset-2">
                        <button id="submit" class="btn btn-primary" type="submit">保存内容</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

</div>


<script src="__ADMIN__js/jquery.min.js"></script>
<script src="__ADMIN__js/bootstrap.min.js"></script>
<script src="__ADMIN__js/plugins/layer/layer.min.js"></script>
<script src="__ADMIN__js/plugins/switchery/switchery.min.js"></script>
<script src="__ADMIN__js/plugins/sweetalert/sweetalert.min.js"></script>

<script src="__ADMIN__js/common.js"></script>
<script>
    var elem = document.querySelector('.js-switch');
    var eid = 0,pid = 0;
    function addM(){
        $('#title').val('');
        $('#link').val('');
        $('#sort').val('');
        $(elem).siblings().remove();
        var switchery = new Switchery(elem, { });
        $('#addM').modal({ });
    }
    $('#submit').click(function(){
       var title = $('#title').val();
        if(title == ''){
            layer.tips('菜单名称不能为空', '#title', {
                tips: 2
            });
            return false;
        }
        var link = $('#link').val();
        if(link == ''){
            layer.tips('链接名称不能为空', '#link', {
                tips: 2
            });
            return false;
        }
        var objNames = $('#form').serializeArray();
        var dataNames = new Object();
        $.each(objNames,function(key,val){
            dataNames[val.name] = val.value;
        });
        dataNames['id'] = eid;
        dataNames['pid'] = pid;
        $.post($('#form').prop('action'),dataNames,function(data){
            if(data.status > 0){
                $('#addM').modal('hide');
                swal({title: "OMG",text: data.msg,type: "error"}, function() { window.location.reload();
                });
            }else{
                $('#addM').modal('hide');
                swal({title: "Good",text: data.msg,type: "success"}, function() { window.location.reload();
                });
            }
        },'json');
        return false;
    });

    function edit(id){
        $.post("{:U('menu/getMenu')}",{id:id},function(data){
            if(data.status > 0){
                swal({title: "OMG",text: data.msg,type: "error"});
            }
            eid = data.data[0]['id'];
            pid = data.data[0]['pid'];
            $('#title').val(data.data[0]['title']);
            $('#link').val(data.data[0]['link']);
            $('#sort').val(data.data[0]['sort']);
            $('#status').prop('checked',parseInt(data.data[0]['status'])?true:false);
            $(elem).siblings().remove();
            var switchery = new Switchery(elem, { });
            $('#addM').modal({ });
        },'json');
    }

    function Del(id){
        swal({
            title: "您确定要删除吗？",
            text: "",
            type: "warning",
            showCancelButton: true,
            closeOnConfirm: false,
            confirmButtonText: "删除",
            confirmButtonColor: "#ec6c62",
            cancelButtonText: "取消"
        }, function() {
            $.post("{:U('Menu/del')}",{id:id},function(data){
                if(data.status > 0){
                    swal({title: "OMG",text: data.msg,type: "error"}, function() { window.location.reload();
                    });
                }else{
                    swal({title: "Good",text: data.msg,type: "success"}, function() { window.location.reload();
                    })
                }
            });
        })
    }

    function changeMode(id){
        var mode = $("#mode"+id);
        common.status("{:U('Menu/changeMode')}",id,mode);
    }

    function addChildM(id){
        pid = id;
        addM();
    }
</script>
</body>
</html>
